<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
    <meta name="format-detection" content="telephone=no" />
    <title>我的资料</title>
    <meta content="" name="keywords" />
    <meta content="" name="description" />
    <meta content="" name="copyright" />
    <meta content="" name="author" />
    <meta name="robots" content="noarchive">
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="js/map.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript" src="js/urlTool.js"></script>
    <script type="text/javascript" src="js/mescroll.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <link rel="stylesheet" href="css/public.css" />
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/swiper.min.css" />
    <link rel="stylesheet" href="css/mescroll.min.css">
</head>

<body>
    <!--头部-->
    <div class="return_top bgyellow">
        <a href="myCenter.html">
            <span class="login_home cfff">返回个人中心</span>
        </a>
    </div>
    <!--//头部结束-->
    <!--主体区域-->
    <div class="bgfff cb7 pl20 pr20 pb120">
        <!-- <p class="tc fz30 pt50 cblue">实名认证</p> -->
        <form action="" method="post" enctype="multipart/form-data">
            <div class="mt30 tr">
                <!--<span class="tx_span">修改头像</span><input type="file" class="upload1 tx_input" id="filehead" name="filehead" multiple>-->
            </div>
            <div class="tc ovf tx-img">
                <img src="temp/userbg.png" alt="" class="tx_img">
            </div>
            <div class="mydata_inf bb mt20">
                <img src="temp/datacenter.png" class="mydata_inf_img mr20">
                <input placeholder="姓名" value="" keyboardtype="web-search" type="search" class="mydata_inf_input mr20 fz28" id="realName">
            </div>

            <div class="mydata_inf bb mt20">
                <img src="temp/payphone.png" class="car_name_img mr10">
                <input placeholder="请输入手机号" value="" keyboardtype="web-search" type="number" class="mydata_inf_input fz28" maxlength="11" id="phone">
            </div>
            <p class="cred tc pt10 hide tishi"></p>

            <div class="bb clear">
                <div class="fl">
                    <img src="temp/yzm.png" class="retrievePassword_img fl mt25 mr10">
                    <input placeholder="请输入验证码" value="" keyboardtype="web-search" type="number" maxlength="6" class="fz28 retrievePassword_input fl" id="car_yzm">
                </div>
                <button type="button" class="fr c999 carmasterbutton fz26" value="" onclick="sendCode(this)">点击发送验证码</button>
            </div>

            <div class="bgfff c333 pt20">
                <p class="fz28 c666">选择证件类型</p>
                <div class="clear divImgIn pt10">
                    <label class="fl mr20 deactivation_unchecked deactivation_select"><input type="radio" class="hide" name="card" value="1" checked="checked" id="idcar">身份证</label>
                    <label class="fl mr20 deactivation_unchecked"><input type="radio" class="hide" name="card" value="2" id="officer">军官证</label>
                    <label class="fl mr20 deactivation_unchecked"><input type="radio" class="hide" name="card" value="3" id="passport">护照</label>
                    <label class="fl deactivation_unchecked"><input type="radio" class="hide" name="card" value="0" id="other">其它</label>
                </div>
            </div>
            <div class="mydata_inf bb">
                <img src="temp/datags.png" class="mydata_inf_img mr20">
                <input placeholder="证件号码" value="" keyboardtype="web-search" type="search" class="mydata_inf_input mr20 fz28" id="idNo">
            </div>

            <div class="bgfff c333 pt20">
                <p class="fz28 c666">选择车辆类型</p>
                <div class="clear divImgIn pt10">
                    <label class="fl mr20 deactivation_unchecked deactivation_select"><input type="radio" class="hide" name="carnum" value="0" checked="checked" id="lan">蓝牌车</label>
                    <label class="fl mr20 deactivation_unchecked"><input type="radio" class="hide" name="carnum" value="1" id="huang">黄牌车</label>
                    <label class="fl mr20 deactivation_unchecked"><input type="radio" class="hide" name="carnum" value="2" id="lv">绿牌车</label>
                </div>
            </div>
            <div class="mydata_inf bb">
                <img src="temp/datags.png" class="mydata_inf_img mr20">
                <input placeholder="车牌号" value="" keyboardtype="web-search" type="search" class="mydata_inf_input mr20 fz28" id="carNo">
            </div>

            <input placeholder="接收cardId值" value="" type="hidden" id="cardId">
            <input value="" type="hidden" id="cardType">
            <input value="" type="hidden" id="carPic">

            <div class="container">
                <!--    照片添加    -->
                <article class="upload-piclist">
                    <div class="upload-file">
                        <input type="file" id="file" name="file" multiple />
                    </div>
                </article>
            </div>

            <div class="car_cont">
                <button type="button" class="w100 car_cont_submit fz32 cfff" onclick="return viewFunction()">保存</button>
            </div>
        </form>
    </div>

    <!--底部-->
    <div class="footerpage"></div>
    <!--//底部-->
</body>
<script>
    $(".footerpage").load("footer.html", '', function () {
        $('#myCenter').attr('href', 'myCenter.html').addClass("select-two").children().attr("class", "myCenterclick");
    });
    $(function () {
        sm.req({
            url: "/sysUserCard/myCard",
            data: {
                noAlert: true
            },
            async: false,
            noAlert: true,
            done: function (res) {
                if (res.code == 200) {
                    if (JSON.stringify(res.data) != "{}" && res.data != null && res.data != undefined && res.data != "" && JSON.stringify(res.data.userCar) != "{}" && JSON.stringify(res.data.userCard) != "{}") {
                        $("#realName").val(res.data.userCard.userName);
                        $("#carNo").val(res.data.userCar.carNum);
                        $("#idNo").val(res.data.userCard.idNo);
                        $("#cardId").val(res.data.userCard.id);
                        $("#cardType").val(res.data.userCard.cardType);
                        $("#carPic").val(res.data.userCar.carPic);
                        if (res.data.userCar.carPicList != undefined && res.data.userCar.carPicList.length > 0) {
                            let html = document.createElement('div');
                            html.className = 'upload-Picitem'
                            html.innerHTML = '<img src="' + fileUrl + res.data.userCar.carPicList[0].attPath + '" id="' + res.data.userCar.carPicList[0].id + '" alt="pic" class="img">'
                            $(".upload-piclist").append(html);
                        }
                        if (res.data.userHead != undefined && res.data.userHead != "") {
                            $(".tx_img").attr('src', res.data.userHead);
                        }
                        switch (parseInt(res.data.userCar.carType)) {
                            case 0: //蓝牌
                                $("#lan").attr("checked", true).parent().addClass('deactivation_select');
                                $("#huang").attr("checked", false).parent().removeClass('deactivation_select');
                                $("#lv").attr("checked", false).parent().removeClass('deactivation_select');
                                break;
                            case 1: //黄牌
                                $("#huang").attr("checked", true).parent().addClass('deactivation_select');
                                $("#lan").attr("checked", false).parent().removeClass('deactivation_select');
                                $("#lv").attr("checked", false).parent().removeClass('deactivation_select');
                                break;
                            case 2: //绿牌
                                $("#lv").attr("checked", true).parent().addClass('deactivation_select');
                                $("#lan").attr("checked", false).parent().removeClass('deactivation_select');
                                $("#huang").attr("checked", false).parent().removeClass('deactivation_select');
                                break;
                            default:
                                $("#lan").attr("checked", true).parent().addClass('deactivation_select');
                                $("#huang").attr("checked", false).parent().removeClass('deactivation_select');
                                $("#lv").attr("checked", false).parent().removeClass('deactivation_select');
                                break;
                        }
                        switch (parseInt(res.data.userCard.idType)) {
                            case 0: //其他
                                $("#other").attr("checked", true).parent().addClass('deactivation_select').siblings('label').attr("checked", false).removeClass('deactivation_select');
                                break;
                            case 1: //身份证
                                $("#idcar").attr("checked", true).parent().addClass('deactivation_select').siblings('label').attr("checked", false).removeClass('deactivation_select');
                                break;
                            case 2: //军官证
                                $("#officer").attr("checked", true).parent().addClass('deactivation_select').siblings('label').attr("checked", false).removeClass('deactivation_select');
                                break;
                            case 3: //护照
                                $("#passport").attr("checked", true).parent().addClass('deactivation_select').siblings('label').attr("checked", false).removeClass('deactivation_select');
                                break;
                            default:
                                $("#other").attr("checked", true).parent().addClass('deactivation_select').siblings('label').attr("checked", false).removeClass('deactivation_select');
                                break;
                        }
                    }
                }
            }
        });
        $(".divImgIn label").click(function () {
            $(this).siblings().removeClass('deactivation_select'); // 删除其他兄弟元素的样式
            $(this).addClass('deactivation_select'); // 添加当前元素的样式
        });
    });

    function viewFunction() {
        var realName = $('#realName').val();
        var phone = $('#phone').val();
        var idNo = $('#idNo').val();
        var carNo = $('#carNo').val();
        var code = $('#car_yzm').val();
        var cardId = $('#cardId').val();
        var cardType = $("#cardType").val();
        var carPic = $("#carPic").val();
        if (realName == "" || realName == undefined || realName == null || realName.length < 1) {
            layer.open({
                content: '请填写姓名！',
                btn: '我知道了'
            });
            return false;
        }

        if (!mydata_phone(phone)) {
            return false;
        }

        if (code == "" || code == undefined || code == null || code.length < 1) {
            layer.open({
                content: '请填写验证码！',
                btn: '我知道了'
            });
            return false;
        }

        if (idNo == "" || idNo == undefined || idNo == null || idNo.length < 1) {
            layer.open({
                content: '请填写证件号码！',
                btn: '我知道了'
            });
            return false;
        }

        if (carNo == "" || carNo == undefined || carNo == null || carNo.length < 1) {
            layer.open({
                content: '请填写车牌号码！',
                btn: '我知道了'
            });
            return false;
        }
        var idType = $('input[name="card"]:checked').val();
        var carType = $('input[name="carnum"]:checked').val();

        sm.req({
            url: '/sysUserCard/add',
            data: {
                realName: realName,
                idNo: idNo,
                carNo: carNo,
                idType: idType,
                carType: carType,
                // cardTypeId: cardType,
                cardTypeId: '5843f242c0da45ea8005e9cf7255bfa0',
                phone: phone,
                code: code,
                cardId: cardId,
                carPic: carPic
            },
            done: function (res) {
                layer.open({
                    content: '保存成功',
                    btn: ['激活码激活', '立即支付'],
                    yes: function (index1) {
                        layer.open({
                            title: '请输入激活码',
                            shadeClose: false,
                            content: '<input type="number" id="activeCode" style="height:.5rem" >',
                            btn: '立即激活',
                            yes: function (idx) {
                                let activeCode = $("#activeCode").val();
                                if (activeCode == "") {
                                    alert('请输入激活码');
                                    return false;
                                }
                                sm.req({
                                    url: '/sysUserCard/activeCard',
                                    data: {
                                        cardId: res.data,
                                        activeCode: activeCode
                                    },
                                    done: function (result) {
                                        if (result.code == 200) {
                                            layer.open({
                                                content: '激活成功',
                                                btn: '我知道了',
                                                yes: function () {
                                                    location.href = "myCenter.html";
                                                }
                                            });
                                        } else {
                                            layer.open({
                                                content: result.message,
                                                btn: '我知道了'
                                            });
                                        }
                                    }
                                });
                            }
                        });
                    },
                    no: function () {
                        var order_data = {
                            proId: res.data,
                            orderType: 1
                        };
                        order_pay(order_data);
                    }
                });
            }
        })
    }

    function order_pay(order_data) {
        sm.req({
            url: '/sysOrder/creat',
            data: order_data,
            done: function (res) {
                // if(res.data.needPay=='Y'){
                //     location.href="mybuy.html?orderNo="+res.data.orderNo+"&orderPrice="+res.data.orderPrice+"&proName="+res.data.proName+"";}
                // else{
                //     location.href="ordercar.html";
                // }
                location.href = "mybuy.html?orderNo=" + res.data.orderNo + "&orderPrice=" + res.data.orderPrice + "&proName=" + res.data.proName + ""
            }
        })
    }

    //获取验证码
    function sendCode(btn) {
        var phone = $('#phone').val();
        if (!mydata_phone(phone)) {
            return false;
        }
        sm.req({
            url: '/common/sendCode',
            dataType: 'json',
            type: 'get',
            data: {
                phone: phone
            },
            done: function (res) {
                if (res.code == 200) {
                    giveCode($(btn))
                }
                layer.open({
                    content: res.message,
                    skin: 'msg',
                    time: 2 //2秒后自动关闭
                });
                return false;
            }
        })
    }


    // 上传车的照片

    $("#file").on("change", function () {
        var filesize = 0;
        var filemaxsize = 10240;
        var filepath = file.value;
        if (filepath) {
            filesize = $("#file")[0].files[0].size;
            var size = filesize / 1024;
            if (size > filemaxsize) {
                layer.open({
                    content: '图片大小不能大于10M',
                    btn: '我知道了'
                });
                file.value = "";
                return false;
            } else if (size <= 0) {
                layer.open({
                    content: '图片大小不能小于0M',
                    btn: '我知道了'
                });
                file.value = "";
                return false;
            }
        } else {
            return false;
        }
        var formData = new FormData();
        formData.append("file", $("#file")[0].files[0]);
        var objurl = getObjectURL($("#file")[0].files[0]);
        sm.req({
            url: '/upload/uploadPic',
            dataType: 'json',
            type: 'post',
            data: formData,
            processData: false,
            contentType: false,
            done: function (res) {
                $("#file").val("");
                if (res.code == 200) {
                    let html = document.createElement('div');
                    html.className = 'upload-Picitem'
                    html.innerHTML = '<img src="' + objurl + '" id="' + res.data.attachid + '" alt="pic" class="img">'
                    $(".upload-piclist").append(html);
                    $("#carPic").val(res.data.objid);
                }
                layer.open({
                    content: res.message,
                    skin: 'msg',
                    time: 2 //2秒后自动关闭
                });
            }
        })
    })

    $(document).on('touchend', '.img', function () {
        var attachId = $(this);
        layer.open({
            content: '确定要删除这张图片吗？',
            btn: ['确定', '取消'],
            yes: function (index) {
                sm.req({
                    url: '/upload/deleteUpload',
                    dataType: 'json',
                    type: 'post',
                    data: {
                        'attachId': attachId.attr('id')
                    },
                    done: function (res) {
                        attachId.parent().remove();
                        $("#carPic").val(null);
                        // $('.z_mask').addClass('hide');
                    }
                })
                layer.close(index);
            }
        });

        return false;
    })


    // 上传头像
    $("#filehead").on("change", function () {
        var filesizehead = 0;
        var filemaxsizehead = 10240;
        var filepathhead = filehead.value;
        if (filepathhead) {
            filesizehead = $("#filehead")[0].files[0].size;
            var sizehead = filesizehead / 1024;
            if (sizehead > filemaxsizehead) {
                layer.open({
                    content: '图片大小不能大于10M',
                    btn: '我知道了'
                });
                filehead.value = "";
                return false;
            } else if (sizehead <= 0) {
                layer.open({
                    content: '图片大小不能小于0M',
                    btn: '我知道了'
                });
                filehead.value = "";
                return false;
            }
        } else {
            return false;
        }
        var formDatahead = new FormData();
        formDatahead.append("file", $("#filehead")[0].files[0]);
        var objurlhead = getObjectURL($("#filehead")[0].files[0]);
        sm.req({
            url: '/upload/uploadPic',
            dataType: 'json',
            type: 'post',
            data: formDatahead,
            processData: false,
            contentType: false,
            done: function (res) {
                if (res.code == 200) {
                    $(".tx-img img").attr("src", objurlhead);
                }
                layer.open({
                    content: res.message,
                    skin: 'msg',
                    time: 2 //2秒后自动关闭
                });
            }
        })
    })

    function getObjectURL(filehead) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(filehead);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(filehead);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(filehead);
        }
        return url;
    }
</script>

</html>